<template>
  <div>
    <el-text type="danger">务必保证真实且有效</el-text>
    <br></br>
    <el-form
      :model="commService"
      label-width="auto"
      style="max-width: 600px"
      label-position="top"
      :rules="rules"
      ref="formRef"
    >
      <el-form-item prop="host" label="服务器地址">
        <el-input v-model="commService.host" />
      </el-form-item>
      <el-form-item prop="port" label="端口">
        <el-input v-model="commService.port" />
      </el-form-item>
      <el-form-item prop="username" label="用户名">
        <el-input v-model="commService.username" />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="commService.password" />
      </el-form-item>
      <el-form-item prop="remotePath"  label="远程路径">
        <el-input v-model="commService.remotePath" />
      </el-form-item>
      <el-form-item prop="remoteBackupPath" label="远程备份路径">
        <el-input v-model="commService.remoteBackupPath" />
      </el-form-item>
      <el-form-item prop="backMaxNum" label="备份数量">
        <el-input v-model="commService.backMaxNum" type="number" placeholder="不小于1的整数" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="change">确认更改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const commService = ref({});

const rules = reactive({
  host: [{ required: true, message: "请输入服务器地址", trigger: "blur" }],
  port: [{ required: true, message: "请输入端口", trigger: "blur" }],
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  remotePath: [{ required: true, message: "请输入远程路径", trigger: "blur" }],
  remoteBackupPath: [
    { required: true, message: "请输入远程备份路径", trigger: "blur" },
  ],
  backMaxNum: [
    {
      required: true,
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入备份数量"));
        } else if (!/^[1-9]\d*$/.test(value)) {
          callback(new Error("请输入不小于1的整数"));
        } else {
          callback();
        }
      },
    },
  ],
});
// 获取公共配置
const init = async () => {
  const result = await window.pywebview.api.getCommService();
  if (result.code === 200) {
    commService.value = result.data;
  } else {
    ElMessage.error(result.msg);
  }
};
init();
const formRef = ref(null);
// 修改公共配置
const change = async () => {
  if (!formRef.value) return
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const result = await window.pywebview.api.updateCommService(
          commService.value
        );
        if (result.code === 200) {
          ElMessage.success("修改成功");
          init();
        } else {
          ElMessage.error(result.msg);
        }
      } catch (error) {
        ElMessage.error(error);
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
};
</script>
